/**
 * Created with JetBrains WebStorm.
 * User: Tao
 * Date: 13-3-23
 * Time: 上午9:07
 * To change this template use File | Settings | File Templates.
 */


        Ext.define('Class',{
            extend:'Ext.data.Model',
            config:{
                fields:['id','name','studentCount'],
                // 和学生建立1对多的关系
                hasMany:{
                    model:'Student',
                    name:'students'
                },
                proxy:{
                    type:'rest',
                    url:'http://localhost:8080/TabPanel/php/classes.php'
                }
            }
        });

        Ext.define('Student',{
           extend:'Ext.data.Model',
           config:{
               fields:['id','number','name','age','phone'],
               proxy:{
                   type:'rest',
                   url:'http://localhost:8080/TabPanel/php/students.php',
                   appendId:true,
                   writer:{
                       type:'json'
                   },
                   listeners:{
                       exception:function(proxy,response)
                       {
                           Ext.Msg.confirm('gg','456'/**Ext.decode(response.responseText).message*/);

                       }
                   }
               }
           }
        });
Ext.application({

    name:'Demo',

    launch:function(){
        var classStore = Ext.create('Ext.data.Store',{
            model:'Class',
            autoLoad:true,
            autoSync:false
        });
        var template = new Ext.XTemplate(

            '<div class="class">',
                '<div class="header">',
                    '<h3>{name}(学生人数:{studentCount})</h3><input type="button" class="normal_btn" id="addBtn" value="追加">',
                '</div>',
                '<div class="listHeader">',
                    '<div class="title" style="width: 10%">姓名</div>',
                    '<div class="title">学号</div>',
                    '<div class="title" style="width: 10%">年龄</div>',
                    '<div class="title">电话号码</div>',
                    '<div class="title">编辑</div>',
                    '<div class="title">删除</div>',
                '</div>',
                '<tpl for="students">',
                    '<div class="students">',
                        '<div style="width: 10%">{name}</div> ',
                        '<div>{number}</div>',
                        '<div style="width: 10%">{age}</div>',
                        '<div>{phone}</div>',
                        '<div><input type="button" class="normal_btn" id="editBtn" value="编辑"/></div>',
                        '<div><input type="button" class="normal_btn" id="deleteBtn" value="删除"/></div>',
                        '<div style="display: none">{id}</div>',
                    '</div>',
                '</tpl>',
            '</div>'
        );

        var titleBar = Ext.create('Ext.TitleBar',{

            docked:'top',
            title:'常州蓝淋小学一年级学生信息'
        });

        var formpanel = Ext.create('Ext.form.Panel',{

            modal:true,
            hideOnMaskTap:false,
            centered:true,
            height:350,
            width :'100%',
            layout:'vbox',
            items:[
                {
                    docked:"top",
                    xtype:'toolbar',
                    title:"编辑学生信息"
                },{
                    docked:'bottom',
                    xtype:'toolbar',
                    items:[

                        {
                            text:'确定',
                            handler:function(){
                                var id = Ext.ComponentManager.get('id').getValue();
                                var currentClass = dataview.getSelection()[0];
                                var studentStore = currentClass.students();
                                Ext.Msg.alert(id+'');
                                if(id == "-1"){
                                    var currentStudent = Ext.create('Student');
                                }else{
                                    var currentStudent = studentStore.getById(id);
                                }
                                formpanel.updateRecord(currentStudent);

                                    if(id == '-1')
                                        studentStore.add(currentStudent);
                                    currentStudent.save({
                                       success:function(){
                                           classStore.load();
                                           dataview.refresh();
                                       }
                                    });
                                    formpanel.hide();

                            }
                        },{
                            xtype:'spacer'
                        },{
                            text:'取消',
                            handler:function(){
                                formpanel.hide();
                            }
                        }]
                },
                {
                    xtype:'fieldset',
                    items:[
                        {
                            xtype:'textfield',
                            name:'number',
                            label:'学号',
                            maxLength:10,
                            placeHolder:'请输入学号',
                            required:true,
                            clearIcon:true
                        },{
                            xtype:'textfield',
                            name:'name',
                            label:'姓名',
                            maxLength:4,
                            placeHolder:'请输入姓名',
                            required:true,
                            clearIcon:true
                        },{
                            xtype:'numberfield',
                            name:'age',
                            label:'年龄',
                            maxLength:2,
                            placeHolder:'请输入年龄',
                            required:true,
                            clearIcon:true
                        },{
                            xtype:'textfield',
                            name:'phone',
                            label:'电话',
                            maxLength:20,
                            placeHolder:'请输入电话',
                            required:true,
                            clearIcon:true
                        },{
                            xtype:'hiddenfield',
                            name:'id',
                            id:'id'
                        }
                    ]
                }
            ]

        });
        var dataview = Ext.create('Ext.DataView',{
            items:titleBar,
            itemTpl:template,
            store:classStore,
            listeners:{
                itemtap:function(mydataview,index,target,record,e){

                    var target = e.target;

                    if(target.id == 'addBtn'){
                        Ext.Viewport.add(formpanel);

                        var student = Ext.create('Student',{
                            id:-1,
                            number:'',
                            name:'',
                            age:'',
                            phone:''
                        });
                        formpanel.setRecord(student);
                        formpanel.show();
                    }else if(target.id == 'editBtn'){
                        Ext.Viewport.add(formpanel);
                        var parentDiv = target.parentElement.parentElement;
                        var id = parentDiv.children[6].innerHTML;
                        var name = parentDiv.children[0].innerHTML;
                        var number = parentDiv.children[1].innerHTML;
                        var age = parentDiv.children[2].innerHTML;
                        var phone = parentDiv.children[3].innerHTML;
                        var student = Ext.create('Student',{
                           id:id,
                           number:number,
                           name:name,
                           age:age,
                           phone:phone
                        });
                        formpanel.setRecord(student);
                        formpanel.show();
                    }else if(target.id = 'deleteBtn'){

                        var parentDiv = target.parentElement.parentElement;
                        var id = parentDiv.children[6].innerHTML;
                        var studentStore = record.students();
                        var currentStudent = studentStore.getById(id);
                        currentStudent.erase({
                            success:function(){
                                classStore.load();
                                dataview.refresh();
                            }
                        });
                    }
                }
            }
        });
        Ext.Viewport.add(dataview);

    }

});
